<html>
  <head>
  
  <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
  <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
  
  <title>Test Aup</title>
  	<script src="js/aupQuery.js"></script>
	<script src="js/aup.js"></script>
	<style>
		.selected_true {
			color:red;
		}
		.selected_false {
			
		}
		.visible {
			display:none;
		}
		
	</style>
	<script>
		
		function loadAup(){
			
			var context = {};
			context.log = '';
  			context.people = [ { firstName: 'Bert', lastName: 'Bertington' , selected:false },
	            				{ firstName: 'Charles', lastName: 'Charlesforth', selected:false },
	            				{ firstName: 'Denise', lastName: 'Dentiste' , selected:false}];
  			
  			context.formPeople = {};
  			context.newName = {};
  			context.currentPeople = context.people[0];
  			context.selectedIndex = 0;
  			
  			context.select = function(data){
  				if(context.selectedIndex != data.index){
  					context.people[context.selectedIndex].selected = false;
  	  				var newCurrent = context.people[data.index];
  	  				context.people[data.index].selected = true;
  	  				context.currentPeople =  newCurrent;
  	  				context.selectedIndex = data.index;	
  	  				context.log = 'changed';
  				} else {
  					context.people[data.index].selected = !context.people[data.index].selected;
  					context.log = 'same';
  				}
  				
  				
  			}
  			
  			context.add = function(){ 
  				var newName = {firstName: context.newName, lastName: context.newName}
  				context.people.push(newName); 
  			}
  			context.show = function(data){ 
  				alert(JSON.stringify(data)); 
  			}
  			
  			context.newPerson = function(data){ 
  				var newPeople = {firstName: context.formPeople.firstName, lastName: context.formPeople.lastName};
  				context.people.push(newPeople);
  				return false;
  			}
  			
  			
  			aup.start(context);
			
			
		}
	
	
	</script>
  	  <script>
	
  
  
  
	
    
	
     -->
  </script>
  	
  </head>
  <body onload="loadAup()">
 	<span>${log}</span>
 	<div with='currentPeople as person'  >
 		<div events='click: show' >
 			<span>-->  ${person.firstName}</span><br>
       		<span>-->  ${person.lastName}</span>
 		</div>
	</div>
 	
 	 <br><br>
  	<form with='formPeople as person' events='submit: newPerson'>
  		LOG: <input field='log'/><br>
  		FN: <input field='person.firstName'/><br>
        LN: <input field='person.lastName'/><br>
        <input type = 'submit' value = 'Add'/><br>
  	</form>
  	<input field='newName'>
  	<button events='click: add'>Add New Name</button>
   	<table  id ="table" >
		
		<tbody forEach='person in people' >
        	<tr events='click: select' name='selected_${person.selected}' class='selected_${person.selected}'>
            	<td>${person.firstName}</td>
            	<td>${person.lastName}</td>
            </tr>
    	</tbody>
    </table>
    <br>
 	
 </body>
  

</html>